<template>
	<el-container>
		<el-header>历史诊断记录</el-header>
		<el-main>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content2 bg-purple2" align="right">
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content1 bg-purple2" align="left">
						<el-table ref="filterTable" :data="tableData" style="width: 100%">
							<el-table-column prop="date" label="日期" sortable width="180" column-key="date"
								:filters="[{text: '2021-06-21', value: '2021-06-21'}, {text: '2021-06-22', value: '2021-06-22'}, {text: '2021-06-23', value: '2021-06-23'}, {text: '2021-06-29', value: '2021-06-29'}]"
								:filter-method="filterHandler">
							</el-table-column>
							<el-table-column prop="date" label="日期" width="180">
							</el-table-column>
							<el-table-column prop="department" label="就诊科室	" width="180">
							</el-table-column>
							<el-table-column prop="check" label="主要检查项目">
							</el-table-column>
							<el-table-column prop="result" label="诊断结果">
							</el-table-column>
							<el-table-column prop="suggest" label="医师建议">
							</el-table-column>
						</el-table>
						<div class="grid-content1 bg-purple2" align="center">
							<el-pagination background="#4FC1B0" layout="prev, pager, next" :total="1000">
							</el-pagination>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-main>
		<el-footer>
			<el-row :gutter="20">
				<el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button>返回主菜单</el-button>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="grid-content bg-purple1" align="center"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple1">
					</div>
				</el-col>
			</el-row>
		</el-footer>
	</el-container>
</template>

<script>
	import {
		showMsgTitle
	} from '@/utils/api'
	import {
		showMsgConfirm
	} from '@/utils/api'
	import {
		getRequest
	} from '@/utils/api'
	export default {
		data() {
			return {
				tableData: [{}],

				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				value2: '',
			};
		},
		methods: {
			resetDateFilter() {
				this.$refs.filterTable.clearFilter('date');
			},
			clearFilter() {
				this.$refs.filterTable.clearFilter();
			},
			formatter(row, column) {
				return row.address;
			},
			filterTag(value, row) {
				return row.tag === value;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			}
		},
		mounted: function() {
			let url = "/patient/diagnosticrecords";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.tableData = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败!'
				});
			});
		}
	}
</script>
<style>
	.el-footer {
		background-color: #4FC1B0;
		color: #333;
		text-align: center;
		line-height: 60px;
		border-radius: 10px;
	}

	.el-header {
		text-align: left;
		font-size: 40px;
		color: #ffffff;
		border-radius: 10px;
		background-color: #4FC1B0;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		height: 610px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}


	.bg-purple {
		background: #ff55ff;
	}

	.bg-purple1 {
		background: #4FC1B0;
	}

	.bg-purple2 {
		background: #ffffff;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 60px;
	}

	.grid-content2 {
		border-radius: 4px;
		min-height: 30px;
	}

	.grid-content1 {
		border-radius: 4px;
		min-height: 400px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
